<template>
  <div>
    <div class="container">
      <h1 class="user-info">外链列表</h1>
    </div>
    <div>
      <div class="addclassbtn">
      </div>
      <div>
        <a-table row-key="id" :loading="loading" :pagination="pagination" :data="families" :bordered="false">
          <template #columns>
            <a-table-column :title="$t('外链链接')" data-index="id">
              <template #cell="row">
                <a href="#" @click="showRow(row)">{{ row.record.url }}</a>
              </template>
            </a-table-column>
            <a-table-column :title="$t('用户名')" data-index="name" />
            <a-table-column :title="$t('发布时间')" data-index="regist_time" />
            <a-table-column :title="$t('操作')" data-index="operations">
              <template #cell="row">
                <a-button @click="reviseList(row)" v-permission="['admin']" type="text" size="small">
                  {{ $t('编辑') }}
                </a-button>
                <a-popconfirm @ok="delList(row)" content="Are you sure you want to delete?" type="error">
                  <a-button v-permission="['admin']" type="text" size="small">
                    {{ $t('删除') }}
                  </a-button>
                </a-popconfirm>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      visible: false,
      visible_revise: false,
      arrList: [],
      classList: [],
      username: "",
      technology: "",
      mobile: "",
      time: "",
      families: [

        {
          id: '',
          name: '我自己',
          time: '13812345678',
          role: '管理员',
          regist_time: '13小时前',
          url: "www.baidu.com"
        },
        {
          id: '跳转',
          name: '张三',
          time: '13887654321',
          role: '父亲',
          regist_time: '13小时前',
          url: "www.jd.com"
        },
        {
          id: '跳转',
          name: '李四',
          time: '18712345678',
          role: '母亲',
          regist_time: '13小时前',
          url: "www.1lx.xyz"
        },
        {
          id: '跳转',
          name: '张六',
          time: '18787654321',
          role: '姐姐',
          regist_time: '13小时前',
          url: "www.2dph.com"
        },
        {
          id: '跳转',
          name: '张七',
          time: '18812345678',
          role: '哥哥',
          regist_time: '13小时前',
          url: "www.sougou.com"
        },
        {
          id: '跳转',
          name: '张一',
          time: '18887654321',
          role: '爷爷',
          regist_time: '13小时前',
          url: "www.music.163.com"
        },
        {
          id: '跳转',
          name: '李一',
          time: '18912345678',
          role: '奶奶',
          regist_time: '13小时前',
          url: "www.chabuduo.com"
        },
        {
          id: '跳转',
          name: '11',
          time: '13812345678',
          role: '大姨',
          regist_time: '13小时前',
          url: "www.hao123.com"
        },
      ]
    }
  },
  methods: {
    showRow(row) {
      console.log(row.record.url);
    }
  }
}

</script>

<style scoped="less">
.grid-demo .arco-col {
  height: 48px;
  line-height: 48px;
  text-align: center;
}
</style>